<template>
    <section class="drilling-header">
        <div class="left">
            <span>{{ currentTime }}</span>
        </div>
        <div class="center">
            <span>钻机无人驾驶系统</span>
        </div>
        <div class="right">
            <span>{{ city }}</span>
            <span class="icon">☁</span>
            <span>{{ weather }}</span>
            <span>{{ temperature }}</span>
        </div>
    </section>
</template>
  
<script lang="ts" setup>
    import { ref, onMounted } from 'vue'
    
    const currentTime = ref('')
    const city = ref('南昌市')
    const weather = ref('多云')
    const temperature = ref('5~15℃')
  
    // 更新时间
    const updateTime = () => {
        const now = new Date()
        const yyyy = now.getFullYear()
        const mm = String(now.getMonth() + 1).padStart(2, '0')
        const dd = String(now.getDate()).padStart(2, '0')
        const hh = String(now.getHours()).padStart(2, '0')
        const min = String(now.getMinutes()).padStart(2, '0')
        const ss = String(now.getSeconds()).padStart(2, '0')
        currentTime.value = `${yyyy}-${mm}-${dd} ${hh}:${min}:${ss}`
    }
  
    onMounted(() => {
        updateTime()
        setInterval(updateTime, 1000)
    })
</script>
  
<style lang="scss" scoped>
    .drilling-header {
        height: 70px;
        line-height: 70px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: bold;
    
        .left, .center, .right {
            display: flex;
            align-items: center;
        }
        .left{
            flex: 1;
            position: relative;
            span{
                padding-left: 20px;
            }
            &::after {
                content:'';
                position: absolute;
                bottom: 0;
                height: 1px;
                width: 100%;
                background: linear-gradient(90deg, #4BB3E8 0%, #4AB3E8 30%, #4AB3E8 70%, #033361 100%);
            }
        }
        .right{
            flex: 1;
            justify-content: flex-end;
            position: relative;
            &::after {
                content:'';
                position: absolute;
                bottom: 0;
                height: 1px;
                width: 100%;
                background: linear-gradient(90deg, #033361 0%, #4AB3E8 30%, #4AB3E8 70%, #4BB3E8 100%);
            }
            span:last-child {
                padding-right: 20px;
            }
        }
    
        .center {
            // flex: 1;
            width: 850px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            z-index: 1;
            span{
                z-index: 2;
            }

            &::before {
                content: '';
                position: absolute;
                inset: 0;
                background: url('@/assets/images/header.png') no-repeat center;
                background-size: contain;
                z-index: 0;
            }

            > * {
                z-index: 1; // 确保文字在图层上面
            }
        }

        .right span {
            margin-left: 10px;
        }
    
        .icon {
            font-size: 18px;
        }
    }
</style>
  